import React, { useEffect, useState } from 'react';
import { Form, Table, Modal, Button, message, Input } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import {
    DeleteOutlined,
    EditOutlined,
    ExclamationCircleOutlined
} from '@ant-design/icons';
import axios from 'axios'
import './index.scss'
import af from './modal.module.scss'
import { useLocation } from 'react-router-dom'
import DrawerPanel from 'antd/es/drawer/DrawerPanel';

interface DataType {
    key?: React.Key;
    username: string;
    password: number;
    region: string;
}

const { confirm } = Modal

const path = 'http://localhost:2001/api/';

const App: React.FC = () => {
    const [data, setdata] = useState([])

    const [id, setid] = useState<number>()

    const [accounts, setaccount] = useState()

    const [passwd, setpasswd] = useState()

    const [Loading, setLoading] = useState(false)

    const [switchs, setswitchs] = useState(false)

    const [open, setOpen] = useState(false);

    const { pathname } = useLocation()

    const [messageApi, contextHolder] = message.useMessage()
    /** dom上树 就 渲染数据  */
    useEffect(() => {
        // console.log(pathname)
        let url = `${path}userlist`;
        axios.get(url).then(res => {
            // console.log(res.data)
            setdata(res.data)
        })
    }, [])

    const columns: ColumnsType<DataType> = [
        {
            title: 'ID',
            dataIndex: 'id',
            render: (id) => <b style={{ fontWeight: 'bold' }}>{id}</b>
        },
        {
            title: '用户名',
            dataIndex: 'account',
        },
        {
            title: '密码',
            dataIndex: 'passwd',
        },
        {
            title: '操作',
            render: (item) => <>
                <Button danger shape="circle" icon={<DeleteOutlined />}  disabled={switchs} onClick={() => ondelete(item)} />
                <Button type="primary" shape="circle" icon={<EditOutlined />} onClick={() => onupload(item)}  />
            </>
        },
    ];
    /** 删除 */
    const ondelete = (e: any) => {
        const { id } = e
        const dis = data.find((item:any) => item.id === 31)
       
        confirm({
            title: '确定要删除吗？',
            onOk() {
                let url = `${path}userDel`;
                axios.post(url, { id }).then(res => {
                    const { status, msg } = res.data
                    if (status === 200) {
                        setdata([...data])
                        messageApi.open({
                            type: 'success',
                            content: msg,
                            duration: 1.2
                        });
                        location.reload();
                    } else {
                        messageApi.open({
                            type: 'error',
                            content: msg,
                            duration: 1.2
                        });
                    }
                })
            },
        });

    }

    const onupload = (v: any) => {
        const { id } = v
        const datas = data?.filter((item:any) => item.id === id)
        const { account, passwd } = datas[0]
        console.log(account,passwd)
        setOpen(data[0]);
        setid(id)
        setaccount(account)
        setpasswd(passwd)
        // confirm({
        //     content: <>
        //         <Form
        //             name="basic"
        //             labelCol={{ span: 100 }}
        //             wrapperCol={{ span: 16 }}
        //             style={{ maxWidth: 600 }}
        //             initialValues={{ remember: true }}
        //             onFinish={onFinish}
        //             autoComplete="off"
        //         >
        //             <Form.Item
        //                 label="账户"
        //                 name="account"
        //                 initialValue={account}
        //                 rules={[{ required: true, message: '请修改账户' }]}
        //             >
        //                 <Input />
        //             </Form.Item>

        //             <Form.Item
        //                 label="密码"
        //                 name="passwd"
        //                 initialValue={passwd}
        //                 rules={[{ required: true, message: '请修改密码' }]}
        //             >
        //                 <Input.Password />
        //             </Form.Item>
        //             <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
        //                 <Button type="primary" htmlType="submit">
        //                     Submit
        //                 </Button>
        //             </Form.Item>
        //         </Form>
        //     </>,
        // onOk() {

        // },
        // });
    }

    const handleOk = () => {
        setLoading(true);
        setTimeout(() => {
            setLoading(false);
            setOpen(false);
        }, 3000);
    };

    const handleCancel = () => setOpen(false);
    
    /* 数据修改  */
    const onFinish = (values: any) => {
        // console.log('Success:', values);
        
        (async () => {
            let url = `${path}userUpload`;
            const data = [id, ...[values]];
            // console.log(data)
            const res = await axios.post(url, data)
            const { status,msg } = res.data
            if (status === 200) {
                messageApi.open({
                    type: 'success',
                    content: msg,
                    duration: 1.2
                });
            } else {
                messageApi.open({
                    type: 'error',
                    content: msg,
                    duration: 1.2
                });
            }
        })()
        handleCancel();
    };

    const onValuesChange = (val:any) => {
       console.log(val);
    }

    return <>
        {contextHolder}
        <Table
            columns={columns}
            dataSource={data}
            rowKey={(item: any) => item.id}
            pagination={{ pageSize: 5 }}
        />
        <Modal
            open={open}
            title="修改信息"
            className={af.modal}
            onOk={handleOk}
            onCancel={handleCancel}
            footer={[
                <Form
                    name="basic"
                    labelCol={{ span: 8 }}
                    wrapperCol={{ span: 16 }}
                    style={{ maxWidth: 600 }}
                    initialValues={{ remember: true }}
                    onFinish={onFinish}
                    // onValuesChange={onValuesChange}
                    autoComplete="off"
                    key="basic"
                >
                    <Form.Item
                        label="用户名"
                        name="account"
                        key="username"
                        rules={[{ required: true, message: '请修改账号' }]}
                    >
                        <Input placeholder={accounts} style={{ fontWeight:'bold' }} />
                    </Form.Item>
                    <Form.Item
                        label="密码"
                        name="passwd"
                        key="passwd"
                        rules={[{ required: true, message: '请修改密码' }]}
                    >
                        <Input.Password placeholder={passwd} />
                    </Form.Item>
                    <Form.Item wrapperCol={{ offset: 8, span: 16 }} key="btn">
                        <Button type="primary" htmlType="submit">
                            确定
                        </Button>
                    </Form.Item>
                </Form>
            ]}
        ></Modal>
    </>
};



export default App;